<template>
  <div>
    <ContentTitle :info="ctInfo" />
    <div>
      <PreView />
    </div>
    <div class="schoolData" v-for="(item, index) in sensorList" :key="index">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ index }}</span>
        </div>
        <ul class="schoolList">
          <li v-for="(value, index) in item" :key="index">
            <div class="schoolList-i">
              <i
                v-if="value.online"
                style="color: #3dd93d"
                class="iconfont icon-yalichuanganqi"
              ></i>
              <i v-else class="iconfont icon-yalichuanganqi"></i>
              <i
                v-if="value.powerNum < 30 && value.online"
                class="iconfont icon-dianchidianliang"
              ></i>
            </div>
            <div class="schoolList-text">{{ value.devValue }}</div>
            <div class="schoolList-t">{{ value.devName }}</div>
            <div class="schoolList-s">EUI:{{ value.eui }}</div>
          </li>
        </ul>
      </el-card>
    </div>
  </div>
</template>

<script>
import PreView from "./PreView.vue";
import { $devicesensorList } from "@/api/index.js";
import ContentTitle from '@/components/ContentTitle.vue'
export default {
  name: "dashboarddata",
  components: { PreView,ContentTitle },
  data() {
    return {
      ctInfo:{
        text:'设备列表',
        msg:'监控所有设备状态'
      },
      sensorList: [],
    };
  },
  created() {
    this.getSonserList();
  },
  methods: {
    getSonserList() {
      $devicesensorList().then((res) => {
        console.log(res.data.data);
        this.sensorList = res.data.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.card-top {
  margin-bottom: 10px;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
}
// 学校数据
.schoolData {
  margin: 10px 0 0 0;
}
.schoolList {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 125px;
    height: 127px;
    border: 1px solid #e5e5e5;
    margin: 5px;
    text-align: center;
    .schoolList-i {
      height: 52px;
      position: relative;
    }
    .schoolList-i i:nth-of-type(1) {
      font-size: 48px;
      transform: rotate(180deg);
      margin-top: 4px;
      color: #999;
    }
    .schoolList-i i:nth-of-type(2) {
      position: absolute;
      top: 31px;
      right: 38px;
      color: #f56c6c;
    }
    .schoolList-text {
      font-size: 18px;
      color: #434343;
      font-weight: 600;
      margin: 5px 0;
    }
    .schoolList-t {
      font-size: 14px;
      color: #434343;
      font-weight: 600;
      margin: 5px 0;
    }
    .schoolList-s {
      background: #f3f4f5;
      font-size: 12px;
      padding: 3px 0;
      color: #030609;
    }
  }
}
</style>
